<template>
  <div style="font-size: 12px;line-height: 60px;display: flex">
    <div style="flex: 1;font-size: 25px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div>
    <span>{{userName}}</span>
    <el-dropdown style="width: 100px; cursor: pointer">
      <i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人信息</el-dropdown-item>
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Header',
  props: {
    collapseBtnClass: String,
    collapse: Function,
    userName: String,
    role : String
  }
}
</script>
